<template>
  <div class="kiajiang">
  <div class="maincontent ">
    <div class="guide bread-crumbs-guide">
      <span>您当前位置：</span>
      <a href="/index.html">海豚彩票</a>
      <span>&gt;</span>
      <a href="">开奖公告</a>
    </div>
    <div class="results" style="margin-bottom: 10px;border: 1px solid #E2E2E2;">
      <table>
        <thead>
          <tr>
            <th colspan="8" class="caption">全部彩票</th>
          </tr> 
          <tr>
            <th>标识</th> 
            <th>彩种</th> 
            <th>彩种</th> 
            <th>开奖时间</th> 
            <th>开奖结果</th> 
            <th>每日开奖期数</th> 
            <th>图表</th> 
            <th>购买彩票</th>
          </tr>
        </thead>          
        <tbody id="kindsopenlist" v-for="item in kaijiangArr">
            <tr>
              <td class="kinds-logo"><img :src="formatUrl(item.img)"></td>
              <td><router-link :to="{ name: openListUrl(item.gameType)}">{{item.gameName}}</router-link></td>
              <td>{{item.openSessionNo}}期</td>
              <td>{{item.openTime}}</td>
              <td class="balls">
                <div class="open-number">
                  <span class="num" v-for="(ball,index) in item.openResult" v-bind:class="ballColor(item.gameType,index)">{{ball}}</span>
                </div>
              </td>
              <td>{{item.explain}}</td>
              <td><a href="'+zoushiUrl+'"><img :src="graphUrl"></a></td>
              <td><router-link :to="{ name: betUrl(item.gameType)}">代购</router-link> <router-link :to="{ name: betUrl(item.gameType)}">合买</router-link></td>
            </tr>
        </tbody>
      </table>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  name: 'kaijiang',
  data () {
    return {
      msg: 'kaijaing',
      graphUrl: '../../static/images/graph.gif',
      kaijiangArr: [],
      isRed: true,
      isBlue: true
    }
  },
  methods: {
    ballColor:function(e,i){
      if ("13"=== e && 6 === i) {
        console.log(6 === i);
        return "bg-blue"
      }else{
        return "bg-red"
      }
    },
    //转换图片url
    formatUrl: function(url){
      // console.log("---url---"+url);
      url = url.substring(34);
      // console.log("---url---"+url);
      return "../../static/"+url
    },
    //转换投注路径
    betUrl: function(gameType){
      if("13" === gameType){ //双色球
        return "ssqBet"
      }else if("3" === gameType){//重庆时时彩
        return "cqsscBet"
      }else if("17" === gameType){//欢乐牛牛
        return "niuniuBet"
      }else if("18" === gameType){ //加拿大幸运28
        return "cndlu28Bet"
      }else if("4" === gameType) { //北京幸运28
        return "bjlu28Bet"
      }else if("9" === gameType){//广东11选5
        return "gd11x5Bet"
      }else if("14" === gameType){//三分彩
        return "threeBet"
      }else if ("15" === gameType){//五分彩
        return "fiveBet"
      }
    },
    //转换为历史开奖记录
    openListUrl: function(gameType){
      if("13" === gameType){ //双色球
        return "ssqOpenList"
      }else if("3" === gameType){//重庆时时彩
        return "cqsscOpenList"
      }else if("17" === gameType){//欢乐牛牛
        return "niuniuOpenList"
      }else if("18" === gameType){ //加拿大幸运28
        return "cndlu28OpenList"
      }else if("4" === gameType) { //北京幸运28
        return "bjlu28OpenList"
      }else if("9" === gameType){//广东11选5
        return "gd11x5OpenList"
      }else if("14" === gameType){//三分彩
        return "threeOpenList"
      }else if ("15" === gameType){//五分彩
        return "fiveOpenList"
      }
    }

  },
  computed: {
    // ballColor:function(e){
    //   // if ("15"=== gameType) {
    //     return "bg-blue"
    //   // }
    // }
  },
  created:function() {
     this.$http.get('api/api/baseData_lotteryDraw').then((response) => {
          console.log(response.data.code);
          var code = response.data.code;
          if ( '200'=== code ) {
            var result = response.data.data;
            var items = result.items;
            this.kaijiangArr = items;
            console.log(this.kaijiangArr);
          }
        })
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.results {}
.results .caption { color: #333;background: #fcfcfc;font-size: 14px;text-indent: 5px;line-height: 35px;text-align: left;border-bottom: 1px solid #ba2636;}
.results table {width: 100%;border-spacing: 0;}
.results thead tr th:nth-last-child(1) {width: 90px;}
.results thead tr th {border-bottom: 1px solid #ebedec;color: #717171;}
.results thead tr th:nth-child(1) {width: 55px;}
.results thead tr th:nth-child(2) {width: 100px;}
.results thead tr th:nth-child(3) {width: 120px;}
.results thead tr th:nth-child(4) {width: 160px;}
.results thead tr th:nth-last-child(1) {width: 90px;}
.results thead tr th:nth-last-child(2) {width: 50px;}
.results thead tr th:nth-last-child(3) {width: 160px;}
.results tbody tr td {border-bottom: 1px dotted #ddd;color: #717171;}
.results .ball {background: #e60000;color: white;}
.results .ball.blue {background: #3e8be7;}
.results .ball.yellow {background: #ff8e33;}

.results thead tr th {text-align: center;line-height: 40px;font-weight: normal;border-bottom: 1px solid #ebedec; color: #717171;}
.results tbody tr td {border-bottom: 1px dotted #ddd;color: #717171;text-align: center;line-height: 50px;vertical-align: middle;}
.results tbody tr td .open-number{text-align: center;}
.results tbody tr td.kinds-logo img{width: 32px;display: block;margin-left: 10px;}
.results table tbody:last-child tr:last-child td {border-bottom: none;}

.maincontent{width: 1000px;margin: 0 auto;overflow: hidden;}
.bread-crumbs-guide {margin: 10px 0;}
.open-number .num{color: #fff;width: 25px;height: 25px;text-align: center;display: inline-block;line-height: 25px;border-radius:50%;font-size: 14px;margin: 0 2px;}
.bg-red{background-color:#f72F17; }
.bg-blue{background-color:#1479D7; }
</style>
